<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
</head>
<script language="javascript">
    function show(id) {
        document.getElementById("id").setAttribute("value", id);
        contentForm.submit();
    }
</script>
<body style="padding-top: 70px;">
<jsp:include page="/topNav"></jsp:include>
<form name="contentForm" method="get" action="viewTheContents">
    <input type="hidden" name="id" id="id" value="" />
</form>
<div class="container">
    <div class="row">
        <div class="col-xs-7">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#hotlist" data-toggle="tab">
                        热门排行
                    </a>
                </li>
                <li><a href="#newlist" data-toggle="tab">最新发布</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="hotlist">
                    <c:if test="${tutorialData.hotTutorials != null}">
                        <c:forEach var="tutorial" items="${tutorialData.hotTutorials}">
                            <div class="media">
                                <img class="media-object pull-left" src="${tutorial.titleImgPath}" width="128" length="128"
                                     style="margin-top: 15px">

                                <div class="media-body">
                                    <p style="color: #999999;margin-bottom: 3px;margin-left: 5px;">${tutorial.userName}&nbsp;&nbsp;
                                        &nbsp;<fmt:formatDate
                                                value="${tutorial.createTime}"
                                                type="both"
                                                pattern="YYYY-MM-dd HH:mm:ss" />&nbsp;
                                        &nbsp;&nbsp;
                                            ${tutorial.scorecount}人评分&nbsp;
                                        平均<font color="green" size="5">
                                            <c:if test="${tutorial.scorecount != 0}">
                                                <fmt:formatNumber value="${tutorial.totalscore/tutorial.scorecount}" pattern="0.0" />
                                            </c:if>
                                            <c:if test="${tutorial.scorecount == 0}">
                                                <fmt:formatNumber value="0.0" pattern="0.0" />
                                            </c:if></font>分
                                    </p>
                                    <h4 class="media-heading"><a href="javascript:show(${tutorial.id})">${tutorial.title}</a></h4>

                                    <div class="caption" style="margin-left: 5px">
                                        <p>${tutorial.introduce}</p>

                                        <p style="color: #999999"><span class="glyphicon glyphicon-comment"></span>&nbsp;0条评论
                                            &nbsp;&nbsp;<span class="glyphicon glyphicon-star-empty"></span>&nbsp;收藏</p>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                        <c:if test="${tutorialData.hotlist_requires_pagination}">
                            <button type="button" id="loading-hotlist" data-loading-text="加载中..." class="btn btn-block"
                                    style="margin-bottom: 20px">更多
                            </button>
                        </c:if>
                    </c:if>
                    <c:if test="${tutorialData.hotTutorials == null}">
                        <div class="text-center">暂无内容</div>
                    </c:if>
                </div>
                <div id="newlist" class="tab-pane fade">
                    <c:if test="${tutorialData.newTutorials != null}">
                        <c:forEach var="tutorial" items="${tutorialData.newTutorials}">
                            <div class="media">
                                <img class="media-object pull-left" src="${tutorial.titleImgPath}" width="128" length="128"
                                     style="margin-top: 15px">

                                <div class="media-body">
                                    <p style="color: #999999;margin-bottom: 3px;margin-left: 5px;">${tutorial.userName}&nbsp;&nbsp;
                                        &nbsp;<fmt:formatDate
                                                value="${tutorial.createTime}"
                                                type="both"
                                                pattern="YYYY-MM-dd HH:mm:ss" />&nbsp;
                                        &nbsp;&nbsp;
                                            ${tutorial.scorecount}人评分&nbsp;
                                        平均<font color="green" size="5">
                                            <c:if test="${tutorial.scorecount != 0}">
                                                <fmt:formatNumber value="${tutorial.totalscore/tutorial.scorecount}" pattern="0.0" />
                                            </c:if>
                                            <c:if test="${tutorial.scorecount == 0}">
                                                <fmt:formatNumber value="0.0" pattern="0.0" />
                                            </c:if></font>分
                                    </p>
                                    <h4 class="media-heading"><a href="javascript:show(${tutorial.id})">${tutorial.title}</a></h4>

                                    <div class="caption" style="margin-left: 5px">
                                        <p>${tutorial.introduce}</p>

                                        <p style="color: #999999"><span class="glyphicon glyphicon-comment"></span>&nbsp;0条评论
                                            &nbsp;&nbsp;<span class="glyphicon glyphicon-star-empty"></span>&nbsp;收藏</p>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                        <c:if test="${tutorialData.newlist_requires_pagination}">
                            <button type="button" id="loading-newlist" data-loading-text="加载中..." class="btn btn-block"
                                    style="margin-bottom: 20px;margin-top: 10px">更多
                            </button>
                        </c:if>
                    </c:if>
                    <c:if test="${tutorialData.newTutorials == null}">
                        <div class="text-center">暂无内容</div>
                    </c:if>
                </div>
            </div>
        </div>

        <div class="col-xs-4">
            <ul class="nav nav-tabs">
                <li class="disabled"><a href="#userlist">用户排行</a></li>
            </ul>
            <div id="userlist" class="tab-pane fade in active">
                <table class="table" style="margin-top: 10px">
                    <c:if test="${users != null}">
                        <c:forEach var="userName" items="${users}" varStatus="status">
                        <tr>
                            <td>${status.index+1}</td>
                            <td>${userName}</td>
                        </tr>
                        </c:forEach>
                    </c:if>
                    <c:if test="${users == null}">
                        <div class="text-center">暂无用户</div>
                    </c:if>
                </table>
            </div>

        </div>
    </div>
</div>
</body>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/user_defined.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
    var hotpage = 2;
    var newpage = 2
    $('#loading-hotlist').click(function () {
        var btn = $(this)
        btn.button('loading')
        $.ajax({
            url: "/Origami/showMoreHot",
            type: "post",
            data: {page: hotpage},
            dataType: "json",
            async: false,
            success: function (data) {
                var tutorialData = data;
                var hotTutorials = tutorialData.hotTutorials;
                if(hotTutorials != null){
                    for (var i = 0; i < hotTutorials.length; i++) {
                        $("#loading-hotlist").before("<div class='media'><img class = 'media-object pull-left' src = " +
                                "'" + hotTutorials[i].titleImgPath + "' width = '128' length = '128' style = 'margin-top:15px'><div class = 'media-body'><p  style = 'color: #999999;margin-bottom: 3px;margin-left: 5px;' >" + hotTutorials[i].userName + "&nbsp;&nbsp;&nbsp;<fmt:formatDate value='${hotTutorials[i].createTime}' type='both' pattern='YYYY-MM-dd HH:mm:ss' />&nbsp;&nbsp;&nbsp;" + hotTutorials[i].scorecount + "人评分&nbsp;平均 <font color = 'green' size = '5'><c:if test='${hotTutorials[i].scorecount != 0}'><fmt:formatNumber value='${hotTutorials[i].totalscore/hotTutorials[i].scorecount}' pattern='0.0' /></c:if><c:if test='${hotTutorials[i].scorecount == 0}'><fmt:formatNumber value='0.0' pattern='0.0' /></c:if></font>分</p><h4 class = 'media-heading'><a href = 'javascript:show(" + hotTutorials[i].id + ")'>" + hotTutorials[i].title + "</a></h4><div class = 'caption' style = 'margin-left: 5px' ><p>" + hotTutorials[i].introduce + "</p><p style = 'color: #999999'><span class = 'glyphicon glyphicon-comment'></span>&nbsp;0条评论&nbsp;&nbsp;<span class = 'glyphicon glyphicon-star-empty'></span>&nbsp;收藏</p></div></div></div>");
                    }
                }else{
                    btn.hide();
                }

                if(!tutorialData.hotlist_requires_pagination){
                    btn.hide();
                }else{
                    btn.button('reset')
                }
                hotpage++;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown){
                alert();
            }
        })
    });


    $('#loading-newlist').click(function () {
        var btn = $(this)
        btn.button('loading')
        $.ajax({
            url: "/Origami/showMoreNew",
            type: "post",
            data: {page: newpage},
            dataType: "json",
            async: false,
            success: function (data) {
                var tutorialData = data;
                var newTutorials = tutorialData.newTutorials;
                if(newTutorials != null){
                    for (var i = 0; i < newTutorials.length; i++) {
                        $("#loading-newlist").before("<div class='media'><img class = 'media-object pull-left' src = " +
                                "'" + newTutorials[i].titleImgPath + "' width = '128' length = '128' style = 'margin-top:15px'><div class = 'media-body'><p  style = 'color: #999999;margin-bottom: 3px;margin-left: 5px;' >" + newTutorials[i].userName + "&nbsp;&nbsp;&nbsp;<fmt:formatDate value='${newTutorials[i].createTime}' type='both' pattern='YYYY-MM-dd HH:mm:ss' />&nbsp;&nbsp;&nbsp;" + newTutorials[i].scorecount + "人评分&nbsp;平均 <font color = 'green' size = '5'><c:if test='${newTutorials[i].scorecount != 0}'><fmt:formatNumber value='${newTutorials[i].totalscore/newTutorials[i].scorecount}' pattern='0.0' /></c:if><c:if test='${newTutorials[i].scorecount == 0}'><fmt:formatNumber value='0.0' pattern='0.0' /></c:if></font>分</p><h4 class = 'media-heading'><a href = 'javascript:show(" + newTutorials[i].id + ")'>" + newTutorials[i].title + "</a></h4><div class = 'caption' style = 'margin-left: 5px' ><p>" + newTutorials[i].introduce + "</p><p style = 'color: #999999'><span class = 'glyphicon glyphicon-comment'></span>&nbsp;0条评论&nbsp;&nbsp;<span class = 'glyphicon glyphicon-star-empty'></span>&nbsp;收藏</p></div></div></div>");
                    }
                }else{
                    btn.hide();
                }

                if (!tutorialData.newlist_requires_pagination) {
                    btn.hide();
                } else {
                    btn.button('reset')
                }
                newpage++;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
                alert(textStatus);
                alert(errorThrown);
            }
        })
    });
</script>
</html>